<template>
    <div class="container">

        <div class="body_wrap">

            <el-card shadow="hover" ref="content_card">

                <!-- 搜索+功能按钮 -->
                <el-form ref="search" :inline="true" :model="queryParams" size="medium" label-width="120px">
                    <el-card class="table_tool_bar_wrap mb10" shadow="never">
                        <div class="base_wrap">
                            <div class="left">
                                <el-form-item label="" prop="keyword">
                                    <el-input placeholder="请输入..." prefix-icon="el-icon-search" v-model="queryParams.keyword" clearable/>
                                </el-form-item>
                                <el-button @click="handleSearch" type="primary" size="medium">搜索</el-button>
                                <el-button @click="handleReset" type="info" plain size="medium">重置</el-button>
                                <el-button type="text" size="medium" @click="toggleSearchStatus = !toggleSearchStatus">{{toggleSearchStatus ? '收起' : '展开'}}<i class="el-icon--right" :class="toggleSearchStatus?'el-icon-arrow-up':'el-icon-arrow-down'"></i></el-button>
                            </div>

                            <div class="right">
                                <el-button @click="handleDelete()" type="danger" size="medium" icon="el-icon-delete" :disabled="selectionRows.length == 0">删除</el-button>
                            </div>
                        </div>

                        <div v-if="toggleSearchStatus" class="search_toggle mt10">
                            <el-row :gutter="10">
                                <el-col :sm="24" :md="8" :lg="7" :xl="6">
                                    <el-form-item label="操作IP" prop="ip">
                                        <el-input placeholder="" v-model="queryParams.ip" clearable/>
                                    </el-form-item>
                                </el-col>
                                <el-col :sm="24" :md="8" :lg="7" :xl="6">
                                    <el-form-item label="登录地点" prop="address">
                                        <el-input placeholder="" v-model="queryParams.address" clearable/>
                                    </el-form-item>
                                </el-col>
                                <el-col :sm="24" :md="8" :lg="7" :xl="6">
                                    <el-form-item label="操作状态" prop="status">
                                        <el-select placeholder="" v-model="queryParams.status" clearable>
                                            <el-option label="失败" :value="0"></el-option>
                                            <el-option label="成功" :value="1"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :sm="24" :md="8" :lg="7" :xl="6">
                                    <el-form-item label="用户ID" prop="userId">
                                        <el-input placeholder="" v-model="queryParams.userId" clearable/>
                                    </el-form-item>
                                </el-col>
                                <el-col :sm="24" :md="8" :lg="7" :xl="6">
                                    <el-form-item label="操作人" prop="realName">
                                        <el-input placeholder="" v-model="queryParams.realName" clearable/>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                    </el-card>
                </el-form>

                <!-- 表格工具栏 -->
                <!--
                <div class="table_min_tools">
                    <TableTools
                        :columnList.sync="columnList"
                        @handleCheckAllChange="handleCheckAllChange"
                        @handleFullscreen="handleFullscreen('content_card')"
                        @handleReload="handleReload"
                        @handleStripe="handleStripe"/>
                </div>
                -->

                <!-- 表格 -->
                <el-table
                        class="mt10"
                        ref="table"
                        size="medium"
                        height="650"
                        empty-text="暂无数据"
                        element-loading-text="给我一点时间"
                        fit border highlight-current-row
                        :stripe="stripe"
                        v-loading="loading"
                        :data="dataList"
                        @selection-change="handleSelection">

                    <el-table-column type="selection" width="55" prop="selection" v-if="isHideColumn('selection')" align="center"></el-table-column>
                    <el-table-column label="序号" type="index" prop="index" v-if="isHideColumn('index')" width="60" align="center"/>
                    <el-table-column label="模块名" prop="module" v-if="isHideColumn('module')" align="left" show-overflow-tooltip/>
                    <el-table-column label="操作名" prop="name" v-if="isHideColumn('name')" align="left" width="200px" show-overflow-tooltip/>
                    <el-table-column label="请求URI" prop="reqUri" v-if="isHideColumn('reqUri')" width="350px" align="left" show-overflow-tooltip/>
                    <el-table-column label="操作IP" prop="ip" v-if="isHideColumn('ip')" align="left" show-overflow-tooltip/>
                    <el-table-column label="登录地点" prop="address" v-if="isHideColumn('address')" align="left" show-overflow-tooltip/>
                    <el-table-column label="操作类型" align="center" width="100px">
                        <template slot-scope="scope">
                            <span v-if="scope.row.operateType == 1" class="success">查询</span>
                            <span v-else-if="scope.row.operateType == 2" class="primary">新增</span>
                            <span v-else-if="scope.row.operateType == 3" class="warning">修改</span>
                            <span v-else-if="scope.row.operateType == 4" class="danger">删除</span>
                            <span v-else-if="scope.row.operateType == 5" class="info">导出</span>
                            <span v-else-if="scope.row.operateType == 6" class="info">导入</span>
                            <span v-else-if="scope.row.operateType == 0" class="info">其它</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="执行时长" prop="duration" v-if="isHideColumn('duration')" width="100px" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.duration + 'ms'}}
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" align="center" width="100px">
                        <template slot-scope="scope">
                            <span v-if="scope.row.status == 0" class="danger">失败</span>
                            <span v-else-if="scope.row.status == 1" class="success">成功</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="用户ID" prop="userId" v-if="isHideColumn('userId')" width="200" align="left" show-overflow-tooltip/>
                    <el-table-column label="操作人" prop="realName" v-if="isHideColumn('realName')" align="left" show-overflow-tooltip/>
                    <el-table-column label="返回消息" prop="resultMsg" v-if="isHideColumn('resultMsg')" align="left" show-overflow-tooltip/>
                    <el-table-column label="创建时间" prop="ctime" v-if="isHideColumn('ctime')" align="left" width="180" show-overflow-tooltip/>

                    <el-table-column label="操作" prop="btn" v-if="isHideColumn('btn')" width="200px" align="left" fixed="right">
                        <template slot-scope="scope">
                            <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
                            <el-button @click="handleDrawerVisible(scope.row.id)" type="text" size="small">详情</el-button>
                        </template>
                    </el-table-column>

                </el-table>

                <!-- 分页 -->
                <TablePagination
                        :total.sync="queryParams.total"
                        :page.sync="queryParams.page"
                        :limit.sync="queryParams.limit"
                        @handleSizeChange="handleSizeChange"
                        @handleCurrentChange="handleCurrentChange"/>
            </el-card>

            <!-- 右侧抽屉,详情信息 -->
            <el-drawer
                    ref="drawer"
                    class="drawer_wrap"
                    size="800px"
                    :visible.sync="drawerVisible"
                    :with-header="false"
                    :modal="true"
                    direction="rtl"
                    :before-close="handleCloseDrawerDetail">
                <div class="header_title">
                    <div class="title"><i class="el-icon-document"></i> 详情</div>
                    <div class="close el-icon-close" @click="$refs.drawer.closeDrawer()"></div>
                </div>

                <div class="header_body">
                    <table class="detail_wrap" v-if="detail">
                        <tbody>
                            <tr>
                                <td class="title">模块名</td>
                                <td class="info">{{detail.module}}</td>
                                <td class="title">操作名</td>
                                <td class="info">{{detail.name}}</td>
                            </tr>
                            <tr>
                                <td class="title">请求URI</td>
                                <td class="info">{{detail.reqUri}}</td>
                                <td class="title">请求方法</td>
                                <td class="info">{{detail.reqMethod}}</td>
                            </tr>
                            <tr>
                                <td class="title">登录地点</td>
                                <td class="info">{{detail.address}}</td>
                                <td class="title">操作IP</td>
                                <td class="info">{{detail.ip}}</td>
                            </tr>
                            <tr>
                                <td class="title">操作类型</td>
                                <td class="info">
                                    <span v-if="detail.operateType == 1" class="success">查询</span>
                                    <span v-else-if="detail.operateType == 2" class="primary">新增</span>
                                    <span v-else-if="detail.operateType == 3" class="warning">修改</span>
                                    <span v-else-if="detail.operateType == 4" class="danger">删除</span>
                                    <span v-else-if="detail.operateType == 5" class="info">导出</span>
                                    <span v-else-if="detail.operateType == 6" class="info">导入</span>
                                    <span v-else-if="detail.operateType == 0" class="info">其它</span>
                                </td>
                                <td class="title">执行时长</td>
                                <td class="info">{{detail.duration}}</td>
                            </tr>
                            <tr>
                                <td class="title">用户ID</td>
                                <td class="info">{{detail.userId}}</td>
                                <td class="title">操作人</td>
                                <td class="info">{{detail.realName}}</td>
                            </tr>
                            <tr>
                                <td class="title">操作状态</td>
                                <td class="info">

                                    <span v-if="detail.status == 0" class="danger">失败</span>
                                    <span v-else-if="detail.status == 1" class="success">成功</span>
                                </td>
                                <td class="title">创建时间</td>
                                <td class="info">{{detail.ctime}}</td>
                            </tr>
                            <tr>
                                <td class="title">User Agent</td>
                                <td class="info" colspan="3">{{detail.userAgent}}</td>
                            </tr>
                            <tr>
                                <td class="title">请求参数</td>
                                <td class="info" colspan="3">{{detail.reqParams}}</td>
                            </tr>
                            <tr>
                                <td class="title">返回消息</td>
                                <td class="info" colspan="3">{{detail.resultMsg}}</td>
                            </tr>

                        </tbody>
                    </table>
                </div>
            </el-drawer>
        </div>
    </div>
</template>

<script>
    import TableMixin from '@/mixin/TableMixin'
    import TableTools from '@/views/components/table/table-tools'
    import TablePagination from '@/views/components/table/table-pagination'

    export default {
        mixins: [TableMixin],
        components: {
            TableTools,
            TablePagination
        },

        data() {
            return {
                dataList: [],
                queryParams: {
                    order: 'ctime',
                    asc: false,
                    module: null,
                    name: null,
                    reqUri: null,
                    reqMethod: null,
                    reqParams: null,
                    ip: null,
                    address: null,
                    userAgent: null,
                    operateType: null,
                    duration: null,
                    status: null,
                    userId: null,
                    realName: null,
                    resultMsg: null,
                    ctime: null,
                },
                detail: {
                    id: null,
                    module: null,
                    name: null,
                    reqUri: null,
                    reqMethod: null,
                    reqParams: null,
                    ip: null,
                    address: null,
                    userAgent: null,
                    operateType: null,
                    duration: null,
                    status: null,
                    userId: null,
                    realName: null,
                    resultMsg: null,
                    ctime: null,
                }
        }
        },

        created() {
        },

        mounted() {
            this.$nextTick(() => {
                this.getDataList()
            })
        },

        methods: {

            /**
             * 侧边栏抽屉打开
             */
            handleDrawerVisible(id) {
                this.getInfo(id)
                this.drawerVisible = true
            },

            /**
             * 新增或编辑
             */
            handleAddOrUpdateVisible(id) {
                // 表单页面
                // if(!id) {
                //     this.$router.push({name: 'user_form'})
                // } else {
                //     this.$router.push({name: 'user_form', query: {id: id}})
                // }

                // 表单窗口
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(id)
                })
            },

            /**
             * 删除
             */
            async handleDelete(row) {
                let ids = []
                if (row) {
                    ids.push(row.id)
                }
                if (this.selectionRows) {
                    this.selectionRows.filter((item, index) => {
                        ids.push(item.id)
                    })
                }
                if (ids.length <= 0) {
                    this.$notify({title: '提示', message: '请选择需要删除的记录！', type: 'info'});
                } else {
                    const confirm = await this.$confirm('确定要删除？', '提示', {type: 'warning'}).catch(() => {
                    })
                    if (confirm) {
                        const res = await this.$http({
                            url: '/system/log_operate/delete',
                            method: 'POST',
                            data: ids
                        })
                        if (this.ResultMessage(res)) {
                            this.getDataList()
                        }
                    }
                }
            },

            /**
             * 详细信息
             */
            async getInfo(id) {
                if (id) {
                    const res = await this.$http({
                        url: '/system/log_operate/info/' + id,
                        method: 'GET'
                    })
                    this.detail = Object.assign({}, res.data)
                }
            },

            /**
             * 获取表格数据
             */
            async getDataList() {
                this.loading = true
                const res = await this.$http({
                    url: '/system/log_operate/page',
                    method: 'GET',
                    params: this.queryParams
                })
                if (this.ResultMessage(res, false)) {
                    this.dataList = res.data.records || []
                    this.queryParams.total = res.data.total
                }
                this.loading = false
            },

            /**
             * 更多
             */
            handleCommand(command) {
                this.$message('click on item ' + command);
            },

            /**
             * 搜索
             */
            handleSearch() {
                this.getDataList()
            },

            /**
             * 重新加载数据表格
             */
            handleReload() {
                this.getDataList()
            },

            /**
             * 重置搜索表单
             */
            handleReset() {
                this.handleResetPage()
                this.$refs.search.resetFields()
                this.handleReload()
            }

        }

    }
</script>

<style lang="scss" scoped>

</style>
